<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    {{message}}
    <!-- 做了缓存 
    -->
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好',
        books:["sss",'aaa','222']
      },
      computed:{
        totalPrice(){
          //1.普通的for循环
          // let totalPrice = 0;
          // for(let i =0;i <this.books.length;i++){
          //   totalPrice+=this.books[i].price*this.books[i].count
          // }
          // return totalPrice

          //2.for(let i in this.books)
          // let totalPrice = 0;
          // for(let i in this.books){
          //   totalPrice+=this.books[i].price*this.books[i].count
          // }
          // return totalPrice

          //3.for(let i of this.books)
          // let totalPrice = 0;
          // for(let i of this.books){
          //   totalPrice+=i.price*i.count
          // }

          // 4.reduce



          //编程范式：命令式编程/声明式编程
          //编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
          //filter/map/reduce
          // const nums=[10,20,30,111,222,444,40,50]

          //1.需求，：取出所有小于100的数字
          // let newNums = []
          // for(let n of nums){
          //   if(n<100){
          //     newNums.push(n)
          //   }
          // }
          //2.需求：将所有小于100的数字进行转化：全部*2
          // let new2Nums =[]
          // for(let n of newNums){
          //   new2Nums.push(n*2)
          // }

          // console.log(new2Nums)

          //3.需求：将所有new2Nums数字相加，得到最终的结果
          // let total = 0
          // for(let n of new2Nums){
          //   total += n
          // }
          // console.log(total)
        //filter/map/reduce  高阶函数 函数式编程
        //filter中的回到函数有一个要求，必须返回一个boolean值
        //true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
        //false：当返回false时，函数内部会过滤这次的n
        const nums=[10,20,30,111,222,444,40,50]
        let newNums=nums.filter(function(n){
          return n < 100
        })
 
        }
        
      }
    })
  </script>
</body>
</html>